<template>
  <div class="address-container">
    <!--<div v-if="mode === 'view'">-->
      <my-header title="管理收货地址"></my-header>
      <div class="select-address">
        <template v-for="(item,index) in list" v-if="list.length > 0">
          <div class="address-item" :class="{'selected': item.status}">
            <div class="item-inner" :class="{'selected': item.status}">
              <span class="address-account">收货人: {{item.username}}</span>
              <span class="address-telephone">{{item.telephone}}</span>
              <div class="address-detail—text">收货地址: {{item.address}}</div>
            </div>
            <div class="right-layer">
              <address-check :index="index" v-model="item.status" @change="handler"></address-check>
            </div>
          </div>
        </template>
        <div class="empty-address" v-if="list.length <= 0">
          <div>
            <span class="fa fa-inbox icon-address-empty"></span>
            <br>
            <span>暂无历史地址信息</span>
          </div>
        </div>
      </div>
      <bottom-layer class ="bg-active" @click="editNewAddress">
        <span>新增收获地址</span>
      </bottom-layer>
    <!--</div>-->
    <!--<div v-else>-->
      <!--<div class="edit-address">-->
        <!--<my-header title="编辑收货地址" :back="editNewAddress"></my-header>-->
        <!--<div class="province-container">-->
          <!--<div class="province-item" v-for="item in 20">{{item+1}}</div>-->
        <!--</div>-->
        <!--<bottom-layer></bottom-layer>-->
      <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
  import ConfigApi from '@/api/config'
  import MyHeader from '@/components/Header'
  import BottomLayer from '@/components/BottomLayer.vue'
  import AddressCheck from '@/components/AddressCheck'
  export default {
    name: 'SelectAddress',
    components: {
      BottomLayer,
      MyHeader,
      AddressCheck
    },
    data: () => ({
      mode: 'view',
      bool: false,
      list: []
    }),
    created () {
      this.origin = JSON.parse(JSON.stringify(this.list))
    },
    mounted () {
      /**
       * 注意 用户ID是写的假的
       * @type {number}
       */
      this.$Central.$emit('loading', true)
      var memberId = 10012
      ConfigApi.getAddressList({
        memberId
      }).then(response => {
        this.$Central.$emit('loading', false)
        if (response.data.code == 0) {
          console.log('here')
          var responseData = [{
            username: '张三',
            telephone: '15184406336',
            address: '四川省成都市天府新区天府新区天府新区华阳街道',
            status: false
          }]
          for (var i = 0; i < 10;i++) {
            responseData.push({
              username: '张三',
              telephone: '15184406336',
              address: '四川省成都市天府新区天府新区天府新区华阳街道',
              status: false
            })
          }
          this.list = responseData
          /**
           * 将拿到的后端数据进行格式化
           */
//          this.list = response.data.data;
        } else {
          window.alert('获取地址信息失败,错误信息:' + response.data.message)
        }
      }, err => {
        this.$Central.$emit('loading', false)
        window.alert('系统错误，获取地址信息失败')
      })
    },
    methods: {
      editNewAddress () {
//        if (this.mode === 'view') {
//          this.mode = 'edit'
//        } else {
//          this.mode = 'view'
//        }
        window.location.href = 'add_new_address.html'
      },
      goBack () {
        window.history.go(-1)
      },
      handler (data) {
        this.list.forEach(item => { item.status = false })
        this.list[data].status = true
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "../assets/css/px2rem";
  @import "../assets/css/variable";

  .address-container{
    width:100%;
    height: 100%;
    display: block;
    position: relative;
  }

  .select-address{
    width:100%;
    position: fixed;
    top:px2rem($header-height);
    bottom:px2rem($bottomHeight);
    background-color: $bgGray;
  }
  .edit-address{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    float: left;
    z-index: 1;
    display: block;
    background-color: $bgGray;
    padding-top: px2rem($header-height);
  }

  .empty-address{
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #c5c5c5;
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  .icon-address-empty{
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .address-item{
    width: 100%;
    box-sizing: border-box;
    padding:0.4rem;
    padding-right: 0;
    position: relative;
    min-height: px2rem(260px);
    border-bottom: 1px solid $borderColor;
    &.selected{
      background: #5e6b85;
    }
    &:last-child{
      border-bottom: none !important;
    }
    background: white;
    float: left;
    clear: both;
    .item-inner{
      width:85%;
      padding-right: 0.3rem;
      float: left;
      box-sizing: border-box;
      &.selected >span,
      &.selected >div{
        color: white;
      }
    }
  }

  .province-item{
    width: 100%;
    height: px2rem(160px);
    padding-left: 0.5em;
    line-height: px2rem(160px);
    color: $fontColor;
    &:first-child{
       border-top: 2px solid $borderColor;
    }
    &:last-child{
      border-bottom: 2px solid $borderColor;
    }
    border-bottom: 2px solid $borderColor;
  }

  .province-container{
    float: left;
    height: auto;
    display: block;
    width:100%;
  }

  .right-layer{
    height: 100%;
    width:15%;
    display: block;
    position: absolute;
    right:0;
    top:0;
  }

  .address-account{
    color: $fontColor;
    font-size: 0.75rem;
    float: left;
  }

  .address-telephone{
    font-size: 0.7rem;
    float: right;
    color: $fontColor;
  }

  .address-detail—text{
    font-size: 0.62rem;
    clear: both;
    margin-top: 0.4rem;
    float: left;
    color: $fontColor;
  }

</style>
